<?php
// 设置页面编码
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻资讯 - 甄成集团</title>
    <link rel="stylesheet" href="../css/news.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/common.css">

    <style>
        .news-header {
            background-image: url('../images/icons/bg_news.png');
        }
    </style>
</head>
<body>
    <!-- 导航栏组件 -->
    <div id="navbar"></div>

    <!-- 新闻资讯头部 -->
    <section class="news-header header">
        <div class="header-content">
            <div class="page-info">
                <h2>新闻资讯</h2>
                <p>NEWS</p>
                <div class="breadcrumb">
                    <span>您的位置:</span>
                    <a href="../index.php">首页</a>
                    <span>/</span>
                    <span>新闻资讯</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 新闻列表 -->
    <section class="news-list-section">
        <div class="news-grid">
            <?php
            // 新闻数据数组
            $news_items = array(
                array(
                    'id' => 1,
                    'title' => '上市即超飞，今晚部今矿高级到上天了！',
                    'content' => '今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...',
                    'image' => '../images/icons/news-cards.png'
                ),
                array(
                    'id' => 2,
                    'title' => '上市即超飞，今晚部今矿高级到上天了！',
                    'content' => '今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...',
                    'image' => '../images/icons/news-cards.png'
                ),
                array(
                    'id' => 3,
                    'title' => '上市即超飞，今晚部今矿高级到上天了！',
                    'content' => '今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...',
                    'image' => '../images/icons/news-cards.png'
                ),
                array(
                    'id' => 4,
                    'title' => '上市即超飞，今晚部今矿高级到上天了！',
                    'content' => '今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...',
                    'image' => '../images/icons/news-cards.png'
                ),
                array(
                    'id' => 5,
                    'title' => '上市即超飞，今晚部今矿高级到上天了！',
                    'content' => '今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...',
                    'image' => '../images/icons/news-cards.png'
                ),
                array(
                    'id' => 6,
                    'title' => '上市即超飞，今晚部今矿高级到上天了！',
                    'content' => '今矿上天了!自2月以来，业内就流传着今麦郎将推出高端矿泉水今矿的消息。但谁也没想到，今矿的首次亮相会如此惊艳...',
                    'image' => '../images/icons/news-cards.png'
                )
            );

            // 循环输出新闻项
            foreach ($news_items as $item) {
                echo '<a href="news-detail.php?id=' . $item['id'] . '" class="news-item">
                    <div class="news-image">
                        <img src="' . $item['image'] . '" alt="新闻图片" onerror="this.onerror=null;this.src=\'../images/placeholder.png\';">
                    </div>
                    <div class="news-content">
                        <h3>' . $item['title'] . '</h3>
                        <p>' . $item['content'] . '</p>
                        <div class="news-footer">
                            <span class="read-more">MORE ></span>
                        </div>
                    </div>
                </a>';
            }
            ?>
        </div>

        <!-- 分页 -->
        <div class="pagination">
            <a href="#" class="prev"><img src="../images/icons/next.png" alt="Previous" onerror="this.onerror=null;this.src='../images/placeholder.png';"></a>
            <?php
            // 输出分页按钮
            for ($i = 1; $i <= 6; $i++) {
                $active = ($i == 1) ? ' class="active"' : '';
                echo '<a href="#"' . $active . '>' . $i . '</a>';
            }
            ?>
            <a href="#" class="next"><img src="../images/icons/next.png" alt="Next" onerror="this.onerror=null;this.src='../images/placeholder.png';"></a>
        </div>
    </section>

    <!-- 页脚组件 -->
    <div id="footer"></div>

    <script src="../js/loadComponents.js"></script>
</body>
</html> 